<!--
 * @Author: fisher luthor-li@qq.com
 * @Date: 2023-11-15 20:50:45
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-04-01 17:22:23
 * @FilePath: \allfront\src\modules\pixelstream\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="player">
    <!-- 页面内容 -->
  </div>
  <div class="code">
    <div id="editor" ref="editor"></div>
    <div class="codeOperate">
      <el-button type="primary" @click="runCode">运行</el-button>
      <el-button type="primary" @click="checkLogs">log</el-button>
      <el-button type="primary" @click="testMethod">test</el-button>
    </div>
    <div class="sdk">
      <div class="sdkItem" v-for="item in SdkMap" :key="item.id">
        <div class="sdkTitle">{{ item.title }}</div>
        <div class="sdkChild">
          <div
            class="sdkChildItem"
            v-for="child in item.children"
            :key="child.id"
          >
            <div class="sdkChildTitle" @click="checkSdk(child.code)">
              {{ child.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-drawer
    v-model="logDrawer"
    title="logs"
    :with-header="false"
    direction="ltr"
  >
    <div class="logs" v-if="logMessages.length">
      <div v-for="item in logMessages" :key="item">
        {{ item }}
      </div>
    </div>
  </el-drawer>
  <!-- <div class="operate"> -->
  <!-- <div class="btn" @click="send2ue">发送消息</div> -->
  <!-- <el-button type="primary" @click="connect">连接像素流</el-button>
    <el-button type="primary" @click="disconnect">断开像素流</el-button>
    <el-button type="primary" @click="listenUeMsg">监听消息</el-button>
    <el-button type="primary" @click="sendMsg2Ue">发送消息</el-button> -->
  <!-- </div> -->
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useAxios } from '@/hooks/useAxios';
import { basicSetup, EditorView } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { SdkMap } from './sdk/index.js';
// import 'codemirror/lib/codemirror.css';
// import 'codemirror/mode/javascript/javascript';
// import Fpstream from '@fqbbmnnnnnn/fpstream';
import Fpstream from '@/utils/fpstream/index.js';
const player = ref(null);
// let fpstream = undefined;
const route = useRoute();
const instanceId = route.params.token;
const { get } = useAxios();
const editor = ref();
const CodeEditor = ref();
const logMessages = reactive([]);
const logDrawer = ref(false);
onMounted(() => {
  get('/ueinstance/getInstanceById', {
    id: instanceId,
  }).then(res => {
    if (res) {
      window.fpstream = new Fpstream(
        player.value,
        `ws://${res.data.instanceIp}:${res.data.port}?userId=qbbmnn`,
        {
          HoveringMouse: true,
        },
      );
      fpstream.connect();
    }
  });
  // const fpstream = new Fpstream(
  //   player.value,
  //   'ws://10.218.44.44:85?userId=qbbmnn',
  // );
  // fpstream = new Fpstream(player.value, 'ws://61.241.66.125:33042/');
  CodeEditor.value = new EditorView({
    doc: `//选择sdk调试
      `,
    extensions: [basicSetup, javascript()],
    parent: editor.value,
  });
});

// const connect = () => {
//   fpstream.connect();
// };

const checkSdk = code => {
  // 创建一个描述内容改变的更改对象
  const changes = {
    from: 0,
    to: CodeEditor.value.state.doc.length,
    insert: code,
  };

  // 应用事务
  CodeEditor.value.dispatch({
    changes: changes,
  });
};
const runCode = () => {
  logMessages.length = 0;
  // 设置执行code内容
  const code = CodeEditor.value.state.doc.toString();
  try {
    eval(code); // 执行代码，谨慎使用!
  } catch (error) {
    console.error('执行代码时发生错误:', error);
  } finally {
    console.log(logMessages);
  }
};
const checkLogs = () => {
  logDrawer.value = true;
};

const testMethod = () => {
  console.log('fpstream', fpstream);
  console.log('testMethod', fpstream.Camera);

  fpstream.Camera.setView({
    Location: {
      X: -594288.4595799337,
      Y: 460229.5602113775,
      Z: 900973.1862497347,
    },
    Rotation: {
      Roll: 0,
      Pitch: -36.00901031494141,
      Yaw: -59.273998205385624,
    },
    // NewZoom: 1247000
  });
};
// const disconnect = () => {
//   fpstream.disconnect();
// };

// const listenUeMsg = () => {};
// const sendMsg2Ue = () => {
//   console.log('fpstream.GIS', fpstream.GIS);
//   fpstream.Gls.resetScene({});
// };

// 在线编辑器
</script>

<style>
.operate {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
.btn {
  width: 80px;
  height: 36px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
.code {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 90%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
}
#editor {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
}
.codeOperate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 40px;
}
.sdk {
  width: 100%;
  height: calc(100% - 540px);
  padding: 15px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.sdkItem {
  margin-bottom: 15px;
}
.sdkTitle {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.sdkChild {
  cursor: pointer;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sdkChildItem {
  font-size: 16px;
  color: #333;
}
.sdkChildItem:hover {
  color: #409eff;
}
.logs {
  width: 95%;
  height: 95%;
  margin: 2% auto;
  border: 2px dashed #333;
  border-radius: 10px;
  padding: 1.5em;
}
</style>
